<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>字典表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="resources/layui/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="resources/layui/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">

            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal addDics_btn">新增</i></a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-warm editDics_btn">编辑</a>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">大分类:</label>
                <div class="layui-input-block" style="width:150px">
                    <select id="sort1" name="select" class="select" lay-verify="required" lay-filter="sort1" lay-search>
                        <option value="">请选择搜索</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">中分类:</label>
                <div class="layui-input-block" style="width:150px">
                    <select id="sort2" name="select" class="select" lay-verify="required" lay-filter="sort2" lay-search>
                        <option value="">请选择搜索</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">小分类:</label>
                <div class="layui-input-block" style="width:150px">
                    <select id="sort3" name="select" class="select" lay-verify="required" lay-filter="sort3" lay-search>
                        <option value="">请选择搜索</option>
                    </select>
                </div>
            </div>
        </form>
    </blockquote>
    <table id="dictionaryList" lay-filter="dictionaryList"></table>
</form>
<script type="text/javascript" src="resources/layui/layui/layui.js"></script>
<script th:inline="none">
    layui.use(['form','layer','laydate','table','laytpl','jquery'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            table = layui.table;

        //字典列表
        var tableIns = table.render({
            elem: '#dictionaryList',
            url : 'dictionarys',
            page : true,
            height : "full-125",
            limit : 20,
            limits : [10,15,20,25],
            id : "dictionaryListTable",
            cols : [[
                {type: "checkbox", fixed:"left"},
                {field: 'pName', title: '父类名称',align:"center"},
                {field: 'name', title: '名称',align:"center"},
                {field: 'lev', title: '级别', align:"center"},
                {field: 'isDisable', title: '是否启用',align:"center",templet:function (row) {
                    return row.isDisable==1?"启用":"禁用";
                }},
            ]]
        });
        $(".search_btn").on("click",function(){
            table.reload("dictionaryListTable",{
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    name: $(".searchVal").val()  //搜索的关键字
                }
            })
        });
        table.on("tool(dictionaryList)",function (obj) {
            //获取当前行的数据
            var data=obj.data;
            switch (obj.event){
                case 'add':
                    addDic(data);
                    break;
                case 'edit':
                    editDic(data);
                    break;
            }
        });

        //三级分类联动
        var sortOne = "";
        var sortTwo = "";
        var sortThree = "";
        //异步加载下拉框数据
        $.get("dictionary/selectDicByPid.do",{"id":0},function (obj) {
            var data=JSON.stringify(obj);
            // console.log("**********"+data+"**********");
            var $html = "";
            if(data != null) {
                $.each(JSON.parse(data), function (index, item) {
                    // console.log("**********"+item.id+"**********");
                    $html += "<option value='" + item.id + "'>" + item.name + "</option>";
                });
                $("#sort1").append($html);
                //append后必须从新渲染
                form.render('select');
            }
        });

        //监听大分类下拉框
        form.on('select(sort1)', function(dataObj){
            //移除中分类下拉框所有选项
            $("#sort2").empty();
            var sortTwoHtml = '<option value="">-----请选择-----</option>';
            $("#sort2").html(sortTwoHtml);
            var sortThreeHtml = '<option value="">-----请选择-----</option>';
            $("#sort3").html(sortThreeHtml);
            sortOne = $("#sort1").find("option:selected").text();

            var value = $("#sort1").val();
            //异步加载下拉框数据
            $.get('/dictionary/selectDicByPid.do',{"id":value},function (obj) {
                var data=JSON.stringify(obj);
                var $html = "";
                if(data != null) {
                    $.each(JSON.parse(data), function (index, item) {
                        $html += "<option value='" + item.id + "'>" + item.name + "</option>";
                    });
                    $("#sort2").append($html);
                    //append后必须从新渲染
                    form.render('select');
                    var id = $("#sort1").find("option:selected").val();
                    table.reload('dictionaryListTable',{url:"dictionarys?id="+id});
                    // console.log("*******************"+$("#sort1").find("option:selected").val());
                }
            });
        });

        //监听中分类下拉框
        form.on('select(sort2)', function(dataObj){
            //移除小分类下拉框所有选项
            $("#sort3").empty();
            var html = '<option value="">-----请选择-----</option>';
            $("#sort3").html(html);

            sortTwo = $("#sort2").find("option:selected").text();
            var value = $("#sort2").val();
            //异步加载下拉框数据
            $.get('dictionary/selectDicByPid.do',{"id":value},function (obj) {
                var data=JSON.stringify(obj);
                var $html = "";
                if(data != null) {
                    $.each(JSON.parse(data), function (index, item) {
                        $html += "<option value='" + item.id + "'>" + item.name + "</option>";
                    });
                    $("#sort3").append($html);
                    //append后必须从新渲染
                    form.render('select');
                    var id = $("#sort2").find("option:selected").val();
                    table.reload('dictionaryListTable',{url:"dictionarys?id="+id});
                }
            });
        });

        //监听小分类下拉框
        form.on('select(sort3)', function(dataObj){
            sortThree = $("#sort3").find("option:selected").text();
        });

        $(".editDics_btn").click(function () {
            var checkStatus = table.checkStatus('dictionaryListTable');
            var data = checkStatus.data;
            var uIds = [];
            if(data.length>1) {
                for (var i in data) {
                    uIds.push(data[i].id);
                }
                //layer.confirm('请选择至多一个字典信息编辑', {icon: 3, title: '提示信息'});
                layer.msg("无法同时编辑多个字典信息，请选择一个");
            }else if(data.length==1) {
                for (var i in data) {
                    uIds.push(data[i].id);
                }
                //进入字典的编辑页面
                // console.log(data);
                var index=layui.layer.open({
                    title:"编辑字典",
                    type:2,
                    area:['600px','320px'],
                    content:"toDicEidtPage.do",
                    success:function (layero,index) {
                        var body = layui.layer.getChildFrame('body', index);//少了这个是不能从父页面向子页面传值的
                        body.contents().find(".pid").val(data.pid);
                        body.contents().find(".name").val(data.name);
                        body.contents().find(".lev").val(data.lev);
                        body.contents().find(".isDisable").val(data.isDisable);

                        if(data.lev==1){
                            body.contents().find("input[name='lev'][value='"+data.lev+"']").prop("checked", true);
                        }else if(data.lev==2){
                            body.contents().find("input[name='lev'][value='"+data.lev+"']").prop("checked", true);
                        }else{
                            body.contents().find("input[name='lev'][value='"+data.lev+"']").prop("checked", true);
                        }
                        if(data.isDisable==1){
                            // body.contents().find("input[type='radio']").eq(0).attr("checked",true);
                            body.contents().find("input[name='isDisable'][value='"+data.isDisable+"']").prop("checked", true);
                        }else if(data.isDisable==0){
                            // body.contents().find("input[type='radio']").eq(1).attr("checked",true);
                            body.contents().find("input[name='isDisable'][value='"+data.isDisable+"']").prop("checked", true);
                        }

                        var pid=data.pid;
                        var html;
                        $.ajax({
                            url:'/dictionarys/list.do',
                            success:function (data) {
                                // html += "<option value=''>-----请选择-----</option>"
                                for (i = 0; i < data.length; i++) {
                                    if(pid==data[i].pid){
                                        html += ("<option value='" + data[i].pid + "' selected>" + data[i].name + "</option>")
                                    }else{
                                        html += ("<option value='" + data[i].pid + "'>" + data[i].name + "</option>")
                                    }

                                }
                                body.contents().find("#dics").append(html);
                                form.render('select');
                            }
                        });
                    }
                });
                // layui.layer.full(index);//全屏显示
            }else{
                layer.msg("请选择需要编辑的字典信息");
            }
        });

        //单击添加按钮
        $(".addDics_btn").click(function () {
            var index=layui.layer.open({
                title:"添加字典",
                type:2,
                area:['600px','320px'],
                content:"toDicAddPage.do",
                success : function(layero, index){
                    // var body = layui.layer.getChildFrame('body', index);
                }
            });
            //layui.layer.full(index);//全屏打开窗口
            window.sessionStorage.setItem("index",index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            // $(window).on("resize",function(){
            //     layui.layer.full(window.sessionStorage.getItem("index"));
            // })
        });
    })

</script>
</body>
</html>